<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>订单详情</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" type="text/css" href="/assets/element-plus/index.css">
    <!-- 引入 Vue.js -->
    <script src="/assets/vue/vue.global.js"></script>
    <!-- 引入 Element Plus -->
    <script src="/assets/element-plus/index.full.js"></script>
    <!-- 引入 Axios -->
    <script src="/assets/axios/axios.js"></script>
    <!-- 引入自定义安全模块 -->
    <script src="/assets/oa/security.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            /*overflow: hidden;*/
            display: flex;
            justify-content: center;
            align-items: center;
            /*height: 150vh;*/
            background-color: #f0f2f5;
        }
        /* 自定义样式 */
        .info-container {
            width: 900px;
            padding: 20px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .info-item {
            margin-bottom: 15px;
        }
        .info-label {
            font-weight: bold;
        }
        .info-value {
            margin-left: 10px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
<div id="app">
    <!-- 页面标题 -->
    <h2>订单详情</h2>
    <!-- 订单信息展示区域 -->
    <div class="info-container">
        <!-- 订单基本信息 -->
        <div class="info-item">
            <span class="info-label">订单ID:</span>
            <span class="info-value">{{ order.orderid }}</span>
        </div>
        <div class="info-item">
            <span class="info-label">客户ID:</span>
            <span class="info-value">{{ order.customerid }}</span>
        </div>
        <div class="info-item">
            <span class="info-label">管理员ID:</span>
            <span class="info-value">{{ order.managerid }}</span>
        </div>
        <div class="info-item">
            <span class="info-label">订单状态:</span>
            <span class="info-value">{{ order.orderstatus }}</span>
        </div>
        <div class="info-item">
            <span class="info-label">订单价格:</span>
            <span class="info-value">{{ order.packagecost }}元</span>
        </div>
        <div class="info-item">
            <span class="info-label">客户用户名:</span>
            <span class="info-value">{{ order.customerUserName }}</span>
        </div>
        <div class="info-item">
            <span class="info-label">客户公司名:</span>
            <span class="info-value">{{ order.customerName }}</span>
        </div>
        <div class="info-item">
            <span class="info-label">客户余额:</span>
            <span class="info-value">{{ order.customerBalance }}元</span>
        </div>
        <div class="info-item" v-if="order.orderPhoneVos.length">
            <!-- 电话卡信息 -->
            <table>
                <thead>
                <tr>
                    <th>电话卡</th>
                    <th>电话卡密码</th>
                    <th>电话状态</th>
                    <th>运营商</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(item, index) in order.orderPhoneVos" :key="index">
                    <td>{{ item.userPhone }}</td>
                    <td>{{ item.userPassword }}</td>
                    <td>{{ item.userStatus }}</td>
                    <td>{{ item.calledOperatorName }}</td>
                    <td>
                        <!-- 链接到电话卡详情页，并传递订单详情数据 -->
                        <a :href="getPhoneCardDetailLink(item)">查看电话卡详情</a>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="info-item" v-else>没有相关电话卡信息</div>
    </div>
</div>

<script>
    // 定义 Main 组件
    var Main = {
        data() {
            return {
                order: {
                    orderid:''
                    ,customerid:''
                    ,managerid:''
                    ,paymenttype:''
                    ,packageid:''
                    ,orderstatus:''
                    ,createtime:''
                    ,updatetime:''
                    ,packagecost:''
                    ,orderPhoneVos:[]
                } // 订单信息数据
            }
        },
        mounted() {
            // 页面加载完成时获取订单详情数据
            this.fetchOrderData();
        },
        methods: {
            fetchOrderData() {
                // 获取订单详情数据的逻辑，请根据实际情况进行修改
                const urlParams = new URLSearchParams(window.location.search);
                const orderid = urlParams.get('orderid');
                axios.post("/order/orderPhone", { orderid: orderid })
                    .then(response => {
                        // 将获取到的订单详情数据赋值给 order 对象
                        console.info("请求成功后，打印出数据")
                        console.info(response)
                        this.order = response.data.data;
                    })
                    .catch(error => {
                        console.error("获取订单详情失败：" + error);
                    });
            }
            ,getPhoneCardDetailLink(phoneCard) {
                console.info("跳转到电话卡详情页")
                console.info(phoneCard)
                // 构造电话卡详情页的链接，并携带订单详情数据
                const orders={
                         orderid:this.order.orderid
                     ,customerid:this.order.customerid
                      ,managerid:this.order.managerid
                    ,paymenttype:this.order.paymenttype
                      ,packageid:this.order.packageid
                    ,orderstatus:this.order.orderstatus
                     ,createtime:this.order.createtime
                     ,updatetime:this.order.updatetime
                    ,packagecost:this.order.packagecost
                }
                const orderData = JSON.stringify(orders);
                const phoneCardData = JSON.stringify(phoneCard);
                return `phone_detail.html?orderData=${encodeURIComponent(orderData)}&phoneCardData=${encodeURIComponent(phoneCardData)}`;
            }
        }
    };

    // 创建 Vue 应用
    const app = Vue.createApp(Main);
    // 挂载至 #app
    app.mount("#app");
</script>

</body>
</html>
